<script setup lang="ts">
import common from "_s/common/localstore";
const theme = common.getTheme() || "light";
const themeRef = ref(theme);
const fab = ref(themeRef.value != "light");
const { dark } = useQuasar();
dark.set(fab.value);
watch(fab, val => {
  console.log(val);
  dark.set(val);
  common.setTheme(val ? "dark" : "light");
});
</script>

<template>
  <!-- From Uiverse.io by Creatlydev -->
  <q-toggle
    v-model="fab"
    unchecked-icon="light_mode"
    :dark="dark.isActive"
    checked-icon="fa-solid fa-moon"
  />
</template>

<style lang="scss" scoped></style>
